<template>
  <div
    id="algorithmStore"
    ref="algorithmStore"
    class="algorithmStore"
    v-loading="loading"
    element-loading-text="加载中……"
  >
    <!-- 顶部 -->
    <el-row id="algorithmStoreTopBar" class="topBar">
      <el-col class="verCenter" :span="2">
        <el-button
          @click="manaGement"
          type="primary"
          text
          bg
          v-show="store == 0"
          >自定义管理</el-button
        >
        <el-button
          @click="algorithmSharing"
          type="primary"
          text
          bg
          v-show="store == 1"
          >算法共享</el-button
        >
      </el-col>
      <el-col :span="3" :offset="19">
        <el-input v-model="name" suffix-icon="Search" @blur="handleBlur" />
      </el-col>
    </el-row>
    <!-- 所有分类 -->
    <el-row id="algorithmStoreSort" class="sort" v-show="store == 1 ? 0 : 1">
      <StoreSort :alsClasses="alsClasses" @selectClass="selectClass" />
    </el-row>
    <!-- 算法列表 -->
    <el-row
      class="main verCenter"
      style="height: calc(100% - 360px)"
      v-loading="loadingMain"
      element-loading-text="加载中……"
    >
      <div
        v-show="alsis.length > 0"
        class="item"
        v-cloak
        v-for="als in alsis"
        :key="als.alsId + new Date().getTime()"
      >
        <StoreCard :als="als" :store="store" />
      </div>
      <el-empty
        class="empty"
        v-show="alsis.length == 0"
        description="未查询到算法信息"
      />
    </el-row>
    <!-- 分页 -->
    <el-row class="pageRow">
      <el-col class="hverCenter page">
        <el-pagination
          background
          v-model:current-page="pageLimit.pageIndex"
          v-model:page-size="pageLimit.pageRow"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageLimit.totalCount"
          @size-change="queryAlgorithmInfos"
          @current-change="queryAlgorithmInfos"
        />
      </el-col>
    </el-row>
    <el-dialog
      v-model="sharingDialog"
      :close-on-click-modal="false"
      class="algorithmCreate"
      width="70%"
      :show-close="false"
    >
      <template #header>
        <div class="title-icon">
          <div class="title-si">算法共享</div>
          <el-icon size="22">
            <Close @click="cancellation" />
          </el-icon>
        </div>
      </template>
      <!-- 共享 -->
      <div class="shopdialog">
        <AlgorithmShare />
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  ref,
  provide,
  onMounted,
  onBeforeUnmount,
  nextTick,
  watch,
  inject,
} from "vue";
import { useRouter } from "vue-router";
import StoreCard from "@/views/algorithm/storeView/StoreCard";
import StoreSort from "@/views/algorithm/storeView/StoreSort";
import AlgorithmShare from "@/views/algorithm/storeView/AlgorithmShare";

import { getAlgorithmInfos, getAllAlgorithmClass } from "@/services/algorithm";
import { ElMessage } from "element-plus";

function manaGement() {
  router.push({ name: "CustomManagement" });
}
const { store } = defineProps({
  store: Number,
});

const sharingDialog = ref(false); //弹框设置
const router = useRouter();
const name = ref(""); // 算法名称过滤条件
const prevName = ref(-1); // 上次的name值
const classId = ref(""); // 算法所属分类id
const alsis = ref([]); // 算法卡列表
const alsClasses = ref([]); // 算法所有分类
const loading = ref(""); // 开启加载动画
const loadingMain = ref(""); // 开启加载动画

provide("sharingDialog", sharingDialog); //传递共享弹框状态
//打开弹框
const algorithmSharing = () => {
  sharingDialog.value = true;
};
const cancellation = () => {
  sharingDialog.value = false;
  queryAlgorithmInfos();
};

const pageLimit = ref({
  pageIndex: 1,
  pageRow: 10,
  totalCount: 0,
}); // 分页对象

const handleBlur = async () => {
  if (name.value == prevName.value) return;
  prevName.value = name.value;
  queryAlgorithmInfos();
};

// 查询算法信息
const queryAlgorithmInfos = async () => {
  loadingMain.value = true;
  const { respStatus, respMessage, respData } = await getAlgorithmInfos({
    pageLimit: pageLimit.value,
    name: name.value,
    classId: classId.value,
    pageType: store,
  });
  if (!respStatus) {
    alsis.value = [];
    pageLimit.value = { pageIndex: 1, pageRow: 10, totalCount: 0 };
    nextTick(() => {
      loadingMain.value = false;
    });
    return showMsg(respMessage);
  }
  alsis.value = respData.dataList;
  pageLimit.value = respData.pageLimit;
  nextTick(() => {
    loadingMain.value = false;
  });
};
queryAlgorithmInfos(); //调用
provide("queryAlgorithmInfos", queryAlgorithmInfos); //传递父组件的方法
// 查询算法所有分类
const queryAllAlgorithmClass = async () => {
  const { respStatus, respMessage, respData } = await getAllAlgorithmClass();
  if (!respStatus) return showMsg(respMessage);
  alsClasses.value = respData;
  loading.value = false;
};
queryAllAlgorithmClass();

// 根据分类查询算法
const selectClass = (val) => {
  classId.value = val;
  queryAlgorithmInfos();
};

function showMsg(message, type = "error") {
  ElMessage({ message, type });
}
</script>
<style lang="scss" scoped>
.algorithmStore {
  width: 100%;
  height: 100%;
  // overflow: hidden;
  img {
    width: 25px;
  }
  .hverCenter {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .verCenter {
    display: flex;
    // align-items: center;
    justify-content: flex-start;
  }
  .topBar {
    background-color: #efefef;
    padding: 5px 10px;
  }
  .sort {
    margin-top: 15px;
  }
  .main {
    margin-top: 10px;
    width: 100%;
    overflow: auto;
    // padding-bottom: 120px;
    .item {
      width: 18%;
      margin: 15px 1% 15px 0.9%;
      flex: 0 0 auto;
    }
    .empty {
      width: 100%;
    }
  }
  .pageRow {
    position: absolute;
    width: 100%;
    bottom: 40px;
    .page {
      background-color: #fff;
      padding: 15px 0;
    }
  }
  .shopdialog {
    width: 100%;
    height: 500px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
  }
  .item {
    width: 18%;
    margin: 15px 1% 15px 0.9%;
    flex: 0 0 auto;
  }
  .title-icon {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-si {
      font-size: 24px;
    }
  }
}
.elrow-text {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
